<html lang="en">
<head>
<title>areas</title>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.tmpl.js"></script>
<script type="text/javascript" src="/js/jquery.container.js"></script>

<script type="text/javascript" src="/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="/ui/jquery.effects.blind.js"></script>
<script type="text/javascript" src="/ui/jquery-ui-1.8.13.custom.js"></script>
<script type="text/javascript" src="/js/jquery.editinplace.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/jquery.jeditable.js"></script>
<script type="text/javascript" src="/js/jquery.getQueryParam.1.0.0.full_.js"></script>
<script type="text/javascript" src="/js/json.js"></script>

<script type="text/javascript" src="/js/hotel-bookings.js"></script>

<link type="text/css" rel="stylesheet" href="/css/style.css">
<script>
var theme = jQuery.cookie('uitheme');
if (theme == null || theme == "") {
	theme = "ui-lightness";
}
blankHtml = "/blank.html";
document.write('<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/'+theme+'/jquery-ui.css" rel="stylesheet" />');
$().ready(function() {
	$("button,a.button", "").button();
	$("a.button").live("click", function(){  
		var keyVal  = $(this).attr("key");
		var action  = $(this).attr("action");
		area = {key:keyVal};
		submitJsonRest(area, "area", action, function(data) {
			document.location.href = document.location.href;
		});
		return false;
	});
	$('#areasDataTable').dataTable( {
		"aoColumns": [ 
		{ "bVisible": false },
		{
			"fnRender": function ( oObj ) {
				return '<a href="hotels.html?area='+oObj.aData[0]+'">'+oObj.aData[1]+'</a>';
			}
		},
		{ "bSortable": true },
		{ "bSortable": true },
		{
			"fnRender": function ( oObj ) {
				return '<td><small><a href="" action="delete" class="button" key="'+oObj.aData[0]+'">Delete</a></small></td>';
			}
		}
		],
	        "aaSorting": [[ 1, "asc" ]],
	       	"bPaginate": false,
        	"bLengthChange": false,
        	"bFilter": true,
        	"bSort": true,
        	"bInfo": false,
        	"bAutoWidth": true,
     	 	"bJQueryUI": true
 	} );

	submitJsonRest({}, "area", "get", function(data) {
 		$.each(data, function(key, val) {
			var rowData  =  [
				val.key, 
				val.city, 
				val.name, 
				val.userId,
				""];
			$("#areasDataTable").dataTable().fnAddData(rowData);
			$("a.button", "").button();
	  	});
	});

});

</script>
</head>
<body>
<br>
<font class="title">Admin - Areas</font><br>
<br>
<div style="overflow: auto;height:70%">
<table id="areasDataTable">
	<thead>
	<tr>
		<th>ID</th>
		<th>City</th>
		<th>Name</th>
		<th>UserID</th>
		<th>Action</th>
	</tr>
	</thead>
	<tbody></tbody>
</table>
</div>
</body>
</html>
